<template>
    <div>
        <div class="header_con">
            <div class="header">
                <div class="welcome fl">欢迎来到好又多!</div>
                <div class="fr">
                    <div class="login_info fl">
                        欢迎您：<em>张 山</em>
                    </div>
                    <div class="login_btn fl">
                        <a href="login.html">登录</a>
                        <span>|</span>
                        <a href="register.html">注册</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="user_center_info.html">用户中心</a>
                        <span>|</span>
                        <a href="cart.html">我的购物车</a>
                        <span>|</span>
                        <a href="user_center_order.html">我的订单</a>
                    </div>
                </div>
            </div>		
        </div>

        <div class="search_bar clearfix">
            <a href="index.html" class="logo fl"><img src="static/images/logo.png"></a>
            <div class="search_con fl">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
            <div class="guest_cart fr">
                <a href="#" class="cart_name fl">我的购物车</a>
                <div class="goods_count fl" id="show_count">1</div>
            </div>
        </div>

        <div class="navbar_con">
            <div class="navbar">
                <h1 class="fl">全部商品分类</h1>
                <ul class="navlist fl">
                    <li><a href="">首页</a></li>
                    <li class="interval">|</li>
                    <li><a href="">手机生鲜</a></li>
                    <li class="interval">|</li>
                    <li><a href="">抽奖</a></li>
                </ul>
            </div>
        </div>

        <div class="center_con clearfix">
            <ul class="subnav fl">
                <li v-for="i in cate_list" :key="i.id"><a href="#model01">{{i.cate_name}}</a></li>
                
            </ul>
            <div class="slide fl">
                <ul class="slide_pics">
                    <li v-for="i in picture_list"><img :src="'http://127.0.0.1:8000'+i.prcture" alt="幻灯片"></li>

                </ul>
                <div class="prev"></div>
                <div class="next"></div>
                <ul class="points"></ul>
            </div>
            <div class="adv fl">
                <a href="#"><img src="static/images/adv01.jpg"></a>
                <a href="#"><img src="static/images/adv02.jpg"></a>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">新鲜水果</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='新鲜水果'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                    </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '3'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                    
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model02">海鲜水产</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">河虾</a>
                    <a href="#">扇贝</a>				
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='海鲜水产'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '1'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model03">猪牛羊肉</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='海鲜水产'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '2'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model04">禽类蛋品</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='禽类蛋品'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '4'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model05">新鲜蔬菜</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='新鲜蔬菜'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '5'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model06">速冻食品</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="i in cate_list" v-if="i.cate_name=='速冻食品'">
                    <img :src=img_url+i.cate_img @click="router_goods(i.id)">
                </div>
                <ul class="goods_list fl">
                    <li v-for="i in goods_list" v-if="i.cate == '6'">
                        <h4><a href="#">{{i.goods_name}}</a></h4>
                        <a href="#"><img :src=img_url+i.goods_img></a>
                        <div class="prize">¥ {{i.goods_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>		
            </div>
            <p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-51851888    京ICP备*******8号</p>
        </div>
    </div>
</template>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            cate_list:[],  // 获取商品列表 
            picture_list:[],  // 获取轮播图列表
            picture_id:'1',  // 用来判断获取那一批次的轮播图
            img_url:"http://127.0.0.1:8000",
            goods_list:[]
        }
    },
    methods:{
        get_cate(){
            // 获取商品分类
            axios({
                url:"http://127.0.0.1:8000/app01/cateapi/",
                method:"get"
            }).then(res=>{
                console.log(res)
                this.cate_list = res.data
            })
        },
        get_pricture(){
            // 获取轮播图图片
            axios({
                url:"http://127.0.0.1:8000/app01/pictureapi/",
                method:"get"
            }).then(res => {
                console.log(res)
                this.picture_list = res.data
            })
        },
        get_goods(){
            axios({
                url: 'http://127.0.0.1:8000/app01/goodsapi/',
                method:"get"
            }).then(res=>{
                this.goods_list = res.data
            })
        },
        router_goods(cid){
            this.$router.push({name:'GoodsList',params:{'cid':cid}})

        }

    },
    created(){
        this.get_cate()
        this.get_pricture()
        this.get_goods()
    }
}
</script>